<script setup>
import { ref } from 'vue'
import expdata from '../../data/PlayerLevelData.json'
import jsonToMap from '../../j2m.js'

const expData = jsonToMap(expdata.data)
const exps = []
for (let l = 61; --l > 1;) {
  exps.unshift(expData.get(l)[2])
}
const currentLv = ref(1)
const currentExp = ref(0)
const targetLv = ref(60)
const add = (a, b) => a + b
</script>

<template>
  <form>
    <fieldset>
      <legend>当前</legend>
      <label for="currentLv">当前等级</label>
      <input id="currentLv" type="number" v-model="currentLv" min="1" :max="targetLv - 1">
      <label for="currentExp">当前等级阅历</label>
      <input id="currentExp" type="number" v-model="currentExp" min="0" :max="exps[currentLv-1] - 1">
    </fieldset>
    <fieldset>
      <legend>目标</legend>
      <label for="targetLv">目标等级</label>
      <input id="targetLv" type="number" v-model="targetLv" min="2" max="60">
    </fieldset>
    <fieldset>
      <legend>升级阅历</legend>
      <output>{{ currentLv < targetLv ? exps.slice(currentLv - 1, targetLv - 1).reduce(add) - currentExp : '当前等级需小于目标等级' }}</output>
    </fieldset>
  </form>
  <table>
    <tr>
      <th>等级</th>
      <th>升级阅历</th>
      <th>累计阅历</th>
    </tr>
    <tr v-for="(exp, lv) in exps">
      <td>{{ lv + 1 }}</td>
      <td>{{ exp }}</td>
      <td>{{ lv ? exps.slice(0, lv).reduce(add) : '-' }}</td>
    </tr>
    <tr>
      <td>60</td>
      <td>-</td>
      <td>{{ exps.reduce(add) }}</td>
    </tr>
  </table>
</template>

<style scoped>
input {
  margin: 0 0.5em 0 0.25em;
}
</style>